<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="../css_pc/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css_pc/default.css" />
    <link rel="stylesheet" type="text/css" href="../css_pc/config.css" />
    <title>智慧应用资源池</title>
</head>

<body>
    <header class="u-header">
        <img class="logo" src="../img_pc/logo-h.png" alt="" />
        <div class="account-wrap">
            <div class="account">
                <a herf="" class="avatar-wrap">
                    <div class="avatar">
                        <div class="img" style="background-image:url()"></div>
                        <span class="approve"><span>v</span>已认证</span>
                    </div>
                </a>
                <div class="des">
                    <a class="name" href="">张阿三</a>
                    <a class="logout" href="#">退出</a>
                </div>
            </div>
        </div>
        <div class="main-menu">
            <ul>
                <li class="active"><a href="">首页</a></li>
                <li><a href="">产品</a></li>
                <li><a href="">动态</a></li>
                <li><a href="">案例</a></li>
                <li><a href="">伙伴</a></li>
                <li><a href="">关于</a></li>
            </ul>
        </div>
    </header>
    <section class="u-container">
        <div class="uc-left">
           <div class="nav-list">
                <div class="head">
                    <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>项目
                </div>
                <ul>
                    <li class="active"><a href="">系统通知</a></li>
                    <li><a href="">管理项目</a></li>
                    <li><a href="">发起项目</a></li>
                </ul>
            </div>
            <div class="nav-list">
                <div class="head">
                    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>设置
                </div>
                <ul>
                    <li><a href="">实名认证</a></li>
                </ul>
            </div>
        </div>
        <div class="uc-right">
            <div class="certification-container">
                <div class="title">实名认证</div>
                <ul class="nav-bar process">
                    <li class="active"><span class="icon">1</span><span>授权协议</span></li>
                    <li><span class="icon">2</span><span>填写身份资料</span></li>
                    <li><span class="icon">3</span><span>绑定银行卡</span></li>
                    <li><span class="icon">4</span><span>验证手机号</span></li>
                    <li><span class="icon"></span><span>完成认证</span></li>
                </ul>
                <div class="content">
                    <ul>
                        <li >
                            <article class="notice">
                                <div class="art-title">注意：</div>
                                <p>首次发起项目需要进行个人实名信息认证，火堆平台通过验证您的身份信息确保平台用户真实可信</p>
                                <p>您的身份信息将被加密，并由xxx保险担保其安全性。</p>
                                <p>认证过程需求授权“好信认证”获取您的个人信息并审核，同意请点“同意授权并进入认证</p>
                            </article>
                            <article class="clause">
                                <h4>认证服务条款</h4>
                                <ul>
                                    <li>
                                        <p class="title">1. 接受条款。</p>
                                        <p class="content">通过首页进入cniso.net网站即表示您同意自己已经与中国认证培训网 (中国认证培训网) 订立本协议，且您将受本协议的 条款和条件 ("条款") 约束。中国认证培训网可随时自行全权决定更改"条款"。如"条款"有任何变更，中国认证培训网将其网站 上刊载公告，通知予您。如您不同意相关变更，必须停止使用"服务"。经修订的"条款"一经在中国认证培训网网站的公布后，立 即自动生效。您登录或继续使用"服务"将表示您接受经修订的"条款"。除另行明确声明外，任何使"服务"范围扩大或功能增强的 新内容均受本协议约束。除非经中国认证培训网的授权高层管理人员签订书面协议，本协议不得另行作出修订。
                                        </p>
                                    </li>
                                    <li>
                                        <p class="title">2. 谁可使用cniso.net？</p>
                                        <p class="content">"服务"仅供能够根据相关法律订立具有法律约束力的合约的个人或公司使用。因此，您的年龄必须在十八周岁或以上，才 可使用本公司服务。如不符合本项条件，请勿使用"服务"。中国认证培训网可随时自行全权决定拒绝向任何人士提供"服务"。"服务"不会提供给被暂时或永久中止资格的中国认证培训网会员。
                                        </p>
                                    </li>
                                </ul>
                            </article>
                            <div class="btn-container">
                                <div class="btn o style1">同意授权并进入认证</div>
                            </div>
                        </li>
                        <li  >
                            <form class="form-style1 fix-margin fix-height style1">
                                <!-- 请把form-tips放form-ctrl前面， 
                            如果要显示info, 在form-item上加i （class），
                            要显示err ，在form-item上加e （class），
                            要显示right ，在form-item上加r （class）-->
                                <div class="form-item i">
                                    <div class="form-tips">
                                        <div class="info"><span></span>请输入您的真实姓名</div>
                                        <div class="err"><span></span>请输入您的真实姓名</div>
                                        <div class="right"><span></span>请输入您的真实姓名</div>
                                    </div>
                                    <label>真实姓名</label>
                                    <div class="form-ctrl">
                                        <input type="text" placeholder="真实姓名">
                                    </div>
                                </div>
                                <div class="form-item e">
                                    <div class="form-tips">
                                        <div class="info"><span></span>请输入您的真实姓名</div>
                                        <div class="err"><span></span>请输入您的真实姓名</div>
                                        <div class="right"><span></span>haha名</div>
                                    </div>
                                    <label>身份证号</label>
                                    <div class="form-ctrl">
                                        <input type="text" placeholder="真实姓名">
                                    </div>
                                </div>
                                <div class="form-item">
                                    <label>学校/单位全称</label>
                                    <div class="form-ctrl">
                                        <input type="text" placeholder="真实姓名">
                                    </div>
                                    <div class="form-tips">
                                        <div class="right"><span></span>请输入您的真实姓名</div>
                                    </div>
                                </div>
                                <div class="form-item i r">
                                    <div class="form-tips">
                                        <div class="info"><span></span>请输入您的真实姓名</div>
                                        <div class="err"><span></span>请输入您的真实姓名</div>
                                        <div class="right"><span></span></div>
                                    </div>
                                    <label>个人简介</label>
                                    <div class="form-ctrl">
                                        <textarea></textarea>
                                    </div>
                                </div>
                            </form>
                            <div class="btn-container">
                                <div class="btn o style1">下一步</div>
                            </div>
                        </li>
                        <!-- 验证手机号 -->
                        <li >
                            <form class="form-style1 fix-margin fix-height style2">
                                <div class="form-item i">
                                    <div class="form-tips">
                                        <div class="info"><span></span>请输入您的手机号码</div>
                                        <div class="err"><span></span>请输入您的真实姓名</div>
                                        <div class="right"><span></span></div>
                                    </div>
                                    <label for="">手机号码</label>
                                    <div class="form-ctrl">
                                        <input type="text" />
                                    </div>
                                </div>
                                <div class="form-item r">
                                    <label for="">验证码</label>
                                    <div class="form-ctrl fix-right-space ">
                                        <input class="" type="text" />
                                        <div class="btn o style1">免费获取校验码</div>
                                    </div>
                                    <div class="form-tips fix-bottom">
                                        <div class="right"><span></span>校验码已发送至您的手机，请注意查收</div>
                                    </div>
                                </div>
                            </form>
                            <div class="btn-container">
                                <div class="btn o style1">下一步</div>
                            </div>
                        </li>

                        <li >
                            <form class="form-style1 fix-margin fix-height style3">
                                <div class="form-item i">
                                    <div class="form-tips">
                                        <div class="info"><span></span>请输入您的手机号码</div>
                                        <div class="err"><span></span>请输入您的真实姓名</div>
                                        <div class="right"><span></span></div>
                                    </div>
                                    <label for="">开户银行</label>
                                    <div class="form-ctrl fix-select">
                                        <input type="text" class="" readonly="" data-toggle="modal" data-target="#selectBank" />
                                        <span class="icon"><img src="../img_pc/icon-down.png"></span>
                                    </div>
                                </div>
                                <div class="form-item">
                                    <label for="">银行储蓄卡号</label>
                                    <div class="form-ctrl">
                                        <input class="" type="number" />
                                    </div>
                                </div>
                            </form>
                            <div class="btn-container">
                                <div class="btn o style1">下一步</div>
                            </div>
                            <div class="modal fade h1" id="selectBank" tabindex="-1" role="dialog" aria-labelledby="selectBankLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">合作银行/机构</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="">
                                                <div class="form-item select">
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="../img_pc/demo-bank.jpg">
                                                    </div>
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="../img_pc/demo-bank.jpg">
                                                    </div>
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="../img_pc/demo-bank.jpg">
                                                    </div>
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="../img_pc/demo-bank.jpg">
                                                    </div>
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="../img_pc/demo-bank.jpg">
                                                    </div>
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="../img_pc/demo-bank.jpg">
                                                    </div>
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="../img_pc/demo-bank.jpg">
                                                    </div>
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="../img_pc/demo-bank.jpg">
                                                    </div>
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="../img_pc/demo-bank.jpg">
                                                    </div>
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="../img_pc/demo-bank.jpg">
                                                    </div>
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="../img_pc/demo-bank.jpg">
                                                    </div>
                                                    <div class="select-item">
                                                        <input type="radio" /><img src="../img_pc/demo-bank.jpg">
                                                    </div>
                                                </div>
                                                <div class="form-item">
                                                    <div class="btn-container">
                                                        <div class="btn o">确定</div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li >
                            <div class="content-wrap finish fix-height style1">
                                <div class="c-img">
                                    <img class="" src="../img_pc/img-finish.png">
                                </div>
                                <h1>恭喜您，实名认证资料提交成功</h1>
                                <p>资料已进入审核阶段（2个工作日），现在您可以开始发起项目</p>
                            </div>
                            <div class="btn-container">
                                <div class="btn o btn-launch">发起项目</div>
                            </div>
                        </li>
                        <li >
                            <div class="content-wrap wait fix-height style1">
                                <div class="c-img">
                                    <img src="../img_pc/img-wait.png">
                                </div>
                                <h1>已进入审核阶段</h1>
                                <p>我们将在2个工作日内完成审核工作，请耐心等待</p>
                            </div>
                        </li>
                        <li >
                            <div class="content-wrap fail fix-height style1">
                                <div class="c-img">
                                    <span aria-hidden="true">&times;</span>
                                </div>
                                <h1>对不起，审核未通过</h1>
                                <p>请根据提示，修改未通过的资料信息，再提交实名资料</p>
                            </div>
                            <div class="btn-container">
                                <div class="btn o btn-chg-profile">修改个人资料</div>
                            </div>
                        </li>
                        <li class="active" >
                            <div class="content-wrap success fix-height style1">
                                <div class="c-img">
                                    <img src="../img_pc/img-finish.png">
                                </div>
                                <h1>恭喜您，实名认证成功！</h1>
                                <p>如需修改个人资料，可进入微信“火堆”公众号 -“个人中心”进行修改</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <footer class="u-footer">
        <div class="copyright">Copyright c 2015 huodui Inc. 保留所有权利 沪ICP备 13042466号-5</div>
        <div class="contact">邮件：huodui@adream.org 电话：021-1234432转221 <img class="wechat" src="../img_pc/icon-wechat.png"></div>
    </footer>
    <script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/util.js"></script>
    <script>
    $(function() {
        //测试用。。。。
        document.addEventListener('keydown', function() {
            if (event.keyCode == 13)
                nextLi();
        })

        function nextLi() {
            var targetLi = $('.nav-bar.process ul li.active');
            // if(targetLi.index()) return;
            targetLi.removeClass('active').next().addClass('active');
            $('.certification-container .content ul li.active').removeClass('active').next().addClass('active');
        }

    })
    </script>
</body>

</html>
